<div
  class="abp-toast-container"
  [style.top]="top || 'auto'"
  [style.right]="right || 'auto'"
  [style.bottom]="bottom || 'auto'"
  [style.left]="left || 'auto'"
  [style.display]="toasts.length ? 'flex' : 'none'"
  [@toastInOut]="toasts.length"
>
  @for (toast of toasts; track toast.options?.id) {
    <abp-toast
      [toast]="toast"
      (remove)="remove($event)"
    ></abp-toast>
  }
</div>
